<template>
    <div class="TissueTree">
        <div  class="organization-search">
            <el-input
                    placeholder="请输入组织名称"
                    v-model="filterText">
            </el-input>
        </div>
        <div class="organization-tree">
            <el-tree
                    class="filter-tree"
                    :data="treeList"
                    :props="defaultProps"
                    default-expand-all
                    :filter-node-method="filterNode"
                    :highlight-current="true"
                    @current-change="getid"
                    ref="tree2">
            </el-tree>
        </div>
    </div>
</template>

<script>
    export default {
        name: "TissueTree",
        data() {
            return {
                organizationId: this.$store.getters.userData.userMsg.id,//组织id
                filterText: '',
                treeList:[],
                defaultProps: {
                    children: 'children',
                    label: 'name'
                }
            };
        },
        watch: {
            filterText(val) {
                this.$refs.tree2.filter(val);
                console.log("val","aaaaaaaaaaaaaaaaaaaaaaaa")
            }
        },
        mounted(){

            this.initTreeInfo();

        },
        methods: {

            initTreeInfo(){
                debugger
                let _this = this;
                let params={
                    structId:this.organizationId,
                }
                _this.Api.setting.queryStructTree(params).then((data)=>{
                    this.treeList=data.data
                })
            },

            getid(event){
                this.$store.dispatch("TISSUE_ID",event.id )
                this.$emit('tissueIdla',event.id)
               console.log("去去去去去去群群群群群群群群群群群群群",event.id )
            },
            filterNode(value, data) {
                console.log(value,"?>?>?>?>?>?>?")
                if (!value) return true;
                return data.name.indexOf(value) !== -1;
            }
        },

    };
</script>
<style>
    .TissueTree .el-tree {
        cursor: default;
        background: #fff;
         border: none;
    }
    .TissueTree .el-tree-node__expand-icon{
        cursor: pointer;
        width: 16px;
        height: 16px;
        margin-left: 0px;
        border:none;
        border-right-width: 0;
        border-left-color:#ffffff;
        border-left-width:0px;
        -ms-transform: rotate(0);
        transform: rotate(0);
        transition: transform .3s ease-in-out;
        background: url("../../assets/img/Group52Copy@2x.png");
        background-size: 16px;
        margin-right: 5px;

    }
    .TissueTree .el-tree-node__expand-icon.expanded {
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
}
</style>

<style scoped rel="stylesheet/scss" lang="scss">
    .TissueTree{
        width:262px;
        min-height:100%;
        background:rgba(255,255,255,1);
        border-right: 1px #E8E8E8 solid;
        border-top: 1px #E8E8E8 solid;
        padding-top: 10px;
        overflow:auto;
        .organization-search{
            width:214px;
            height:32px;
            margin:0 auto;
            margin-bottom: 16px;
        }
        .organization-tree{
            padding-left: 24px;
            font-size:14px;
            font-family:PingFangSC-Regular;
            font-weight:400;
            color:#666666;
            line-height:22px;
        }
    }

</style>